<template>
  <div>
    <n-thing class="theme_box" style="padding:20px">
      <template #header>
        <span style="font-size: 15px; font-weight: 400;">{{ title }}</span>
      </template>
      <template #header-extra>
        <slot name="action"></slot>
      </template>
      <div>
        <ocean :use="form"></ocean>
      </div>
      <template #footer>
        <n-space justify="center">
          <n-space justify="center" size="large">
            <n-button type="primary" @click="query()">
              <a-icon name="Search"></a-icon>&nbsp;查询
            </n-button>
            <n-button @click="form.clearModel(); query()">
              <a-icon name="ErrorOutline"></a-icon>&nbsp;清空
            </n-button>
          </n-space>
        </n-space>
      </template>
    </n-thing>
  </div>
</template>
<script lang="tsx" setup>
import Buttons from '@/ocean/utils/class/Button';
import Form from '@/ocean/utils/class/Form';
let props = defineProps<{
  title: string,
  form: Form,
}>();

let emits = defineEmits(['search'])
const query = () => {
  emits('search', props.form.model);
}
</script>
<style lang="scss" scoped>
</style>